<template>
    <div>
        <div>
            <el-button type="primary" @click="add()">新增身份</el-button>
            <el-button @click="test()">测试</el-button>
            <el-tag type="warning" style="float: right">注意：若更改了当前权限，退出后重新登录生效</el-tag>
        </div>
        <BaseTable
            :tableData="tableData"
            :loading="loading"
            :clickRow="true"
            :page="page"
            @pageChange="pageChange"
        >   <el-table-column
                prop="_id"
                label="key:_id"
                width="250"
            ></el-table-column>
            <el-table-column
                prop="name"
                label="身份"
                width="180"
            ></el-table-column>
            <el-table-column
                prop="desc"
                label="描述"
            ></el-table-column>
            <el-table-column label="操作" width="180">
                <template slot-scope="s">
                    <el-button type="primary" @click="edit(s.row)">编辑</el-button>
                    <el-button type="danger" @click="del(s.row._id)"
                        >删除</el-button
                    >
                </template>
            </el-table-column>
        </BaseTable>
        <Add ref="addDialog" @refsh='initData'></Add>
    </div>
</template>

<script>
import { rolelist,delrole } from "@/api/auth";
import { asyncRouterMap } from "@/router/index";
import BaseTable from "@/components/BaseTable.vue";
import Add from "./Add.vue";
export default {
    components: {
        BaseTable,
        Add,
    },
    data() {
        return {
            tableData: [],
            loading: false,
            page: {
                page: 1,
                limit: 10,
                total: 0,
            },
        };
    },
    computed:{
        routerMap(){
            // this.$nextTick((asyncRouterMap) => {
                return asyncRouterMap
            // })
        }
    },
    created() {
        this.initData();
    },
    mounted(){
        console.log(asyncRouterMap,'asdasdugiubjkbzxcgyuizxgciuzxgb') 
    },
    methods: {
        test(){
            console.log(asyncRouterMap)
        },
        //分页
        pageChange(val) {
            this.page = val;
            this.initData();
        },
        add() {
            this.$refs.addDialog.open(this.routerMap);
        },
        edit(data){
            console.log(asyncRouterMap,this.routerMap,'asiudgbasiubdaksjdbasjk')
            this.$refs.addDialog.open(this.routerMap,data)
        },
        initData() {
            rolelist(this.page)
                .then((res) => {
                    if (res && res.status === 200) {
                        this.page.total = res.data.total;
                        this.tableData = res.data.data;
                    }
                })
                .catch(() => {
                    this.$message.error("获取数据失败");
                });
        },
        del(id) {
            this.$confirm("请保证此权限未使用再删除,是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                this.loading = true;
                delrole(id)
                    .then((res) => {
                        if (res && res.status === 200) {
                            this.$message.success("删除该权限成功!");
                            this.initData();
                        }
                        this.loading = false;
                    })
                    .catch((err) => {
                        this.loading = false;
                        this.$message.error("删除权限失败");
                        this.initData();
                    });
            });
        },
    },
};
</script>

<style>
</style>